<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小车</title>
	<style>
	      *{margin:0;padding:0;}
		  .car{
		  	width:150px;
		  	height:100px;
		  	background:black;
		  	text-align:center;
		  	line-height:100px;
		  	font-size:100px;
		  	color:#fff;
		  	border-radius:25px 25px 50px 50px;
		  	animation:car_ani 5s infinite;
		  }
		  .wheel_warp{
		  	height:50px;
		  	float:left;
		    text-align:center;
		    line-height:45px;
		    font-size:40px;
		    color:#fff;
		  	animation:wheel_warp_ani 5s infinite;
          }
		  .left_wheel,.right_wheel{
		  width:50px;
		  height:50px;
		  background:black;
		  float:left;
		  text-align:center;
		  line-height:45px;
		  font-size:40px;
		  color:#fff;
		  border-radius:25px;
		  animation:wheel_ani 5s infinite;
          }
          .right_wheel{
          	margin-left:50px;
          }
		  @keyframes car_ani{
		  	0%{
		  		margin-left:0;
		  	}
		  	50%{
		  		margin-left:1000px;
		  	}
		  	100%{
		  		margin-left:0;
		  	}

		  }
		  @keyframes wheel_warp_ani{
		  	0%{
		  		margin-left:0;
		  	}
		  	50%{
		  		margin-left:1000px;
		  	}
		  	100%{
		  		margin-left:0;
		  	}
		  }
		  @keyframes wheel_ani{
		    0%{
		  		transform:rotate(0);
		  	}
		  	50%{
		  		transform:rotate(3600deg);
		  	}
		  	100%{
		  		transform:rotate(0);
		  	}
		  }
	</style>
</head>
<body>
	  <div class="car">田</div>
	  <div class="wheel_warp">
	  	<div class="left_wheel">+</div>
	  	<div class="right_wheel">+</div>
	  </div>
</body>
</html>